<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工件识别</title>

    <script type="text/javascript" src="/js/staticResources/js/dark.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/mqttws31.min.js"></script>

    <style>
        body {
            font-family: Arial, Sans-Serif;
            font-size: 0.6em;
            color: black;
        }
        #first{
            left:50px;
            top:0px;
            width: 1200px;
            height:360px;
            background:white ;
            position: absolute;
            border:3px solid #b6c185;
        }
        #second{
            left:50px;
            top:360px;
            width: 1200px;
            height:360px;
            background:white ;
            position: absolute;
            border:3px solid #b6c185;
        }
        .title1{
            left:30px;
            top:0px;
            width: 450px;
            background:white ;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .picture{
            left:30px;
            top:50px;
            width: 450px;
            height:300px;
            transform: rotate(180deg);
            background:black ;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            border:3px solid red;
        }
        .tempImg{
            left:500px;
            top:50px;
            width: 250px;
            height:300px;
            transform: rotate(180deg);
            background:white;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            border:3px solid red;
        }
        .title2{
            left:500px;
            top:0px;
            width: 250px;
            background:white ;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .title3{
            left:800px;
            top:0px;
            width: 360px;
            position: absolute;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .resText{
            left:800px;
            top:50px;
            width: 360px;
            height:300px;
            background:white ;
            position: absolute;
            border:2px solid black;
        }
        input{
            width: 255px;
            height: 28px;
            font-size: 16px;
            border: white;
        }
    </style>


</head>

<body>
<div id="first">
    <div class="title1">
        <h1>左装卸站工件</h1>
    </div>
    <div class="picture">
        <img id="img1" src=""  width="400">
    </div>

    <div class="title2">
        <h1>进料工件模板</h1>
    </div>
    <div class="tempImg">
        <img id="temp1" src="" width="248" >
    </div>

    <div class="title3">
        <h1>检测结果信息</h1>
    </div>
    <div class="resText">
        <tr><input type="text" value=" " id="result10" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result11" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result12" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result13" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result14" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result15" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result16" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result17" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result18" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result19" name="result" readonly/></tr>
    </div>
</div>
<div id="second">
    <div class="title1">
        <h1>右装卸站工件</h1>
    </div>
    <div class="picture">
        <img id="img2" src="" width="400">
    </div>

    <div class="title2">
        <h1>进料工件模板</h1>
    </div>
    <div class="tempImg">
        <img id="temp2" src="" width="248" >
    </div>

    <div class="title3">
        <h1>检测结果信息</h1>
    </div>
    <div class="resText">
        <tr><input type="text" value=" " id="result20" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result21" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result22" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result23" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result24" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result25" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result26" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result27" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result28" name="result" readonly/></tr>
        <tr><input type="text" value=" " id="result29" name="result" readonly/></tr>
    </div>
</div>
</body>
<script type="text/javascript">

    var clientid='recognition';
    client = new Paho.MQTT.Client("192.168.11.15",8083,clientid); //建立客户端实例
    client.connect({
        onSuccess: onConnect,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
    client.onMessageArrived = onMessageArrived; //注册消息接收处理事件

    function onConnect() {
        console.log("已连接");
        client.subscribe("workpieceImage1");
        client.subscribe("workpieceTemp1");
        client.subscribe("recognitionRes1");
        client.subscribe("workpieceImage2");
        client.subscribe("workpieceTemp2");
        client.subscribe("recognitionRes2");
    }

    function onConnectionLost(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client.connect({
            onSuccess: onConnect,
            userName: "admin",
            password: "public"
        });

    }

    function onMessageArrived(message) {
        topic = message.destinationName;
        if(topic=="workpieceImage1"){
            payload = message.payloadString;
            var src='/images/gj_img/'+payload;
            console.log(src);
            document.getElementById("img1").src=src;
        }
        if(topic=="workpieceTemp1"){
            payload = message.payloadString;
            var src='/images/gj_temp/'+payload;
            console.log(src);
            document.getElementById("temp1").src=src;
        }
        if(topic=="recognitionRes1"){
            payload = message.payloadString;
            console.log(payload);
            for (var i = 9; i > 0; i--) {
                document.getElementById("result1"+i).value=document.getElementById("result1"+(i-1)).value;
            }
            document.getElementById("result10").value=payload;
        }
        if(topic=="workpieceImage2"){
            payload = message.payloadString;
            var src='/images/gj_img/'+payload;
            console.log(src);
            document.getElementById("img2").src=src;
        }
        if(topic=="workpieceTemp2"){
            payload = message.payloadString;
            var src='/images/gj_temp/'+payload;
            console.log(src);
            document.getElementById("temp2").src=src;
        }
        if(topic=="recognitionRes2"){
            payload = message.payloadString;
            console.log(payload);
            for (var i = 9; i > 0; i--) {
                document.getElementById("result2"+i).value=document.getElementById("result2"+(i-1)).value;
            }
            document.getElementById("result20").value=payload;
        }

    }
</script>

</html>